  <!-- 商品分类 -->
<template>
    <div class="main-body">
      <header class="main-body-search">
        <el-form :model="search" @submit.native.prevent>
            <el-row :gutter="50" type="flex" justify="space-between">
            <el-col :span="12">
              <el-button type="primary" @click="showTag(false)" icon="el-icon-plus">新建商品分类</el-button>
              <el-button type="warning" @click="start" v-if="!drop" plain>排序</el-button>
              <el-button type="warning" @click="stop" v-else plain>保存排序</el-button>
            </el-col>
            <el-col :span="12" style="text-align: right;">
              <el-form-item label class="nja-form-line">
                <el-input
                style="width: 300px;"
                  v-model.trim="search.name"
                  placeholder="名称"
                  clearable
                  @keyup.enter.native="loadData"
                >
                <div  slot="prefix" style="height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;">
                  <i class="el-icon-search"></i>
                </div>
                <el-button type="primary" slot="append" @click="loadData">查询</el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          </el-form>
    </header>
   
    <el-main class="main-body-table draggable" style="height: calc(100vh - 200px)">
      <div class="table-shadow"></div>
      <div class="tags" v-if="tableData && tableData.length > 0">
        <div class="tag" v-for="(item) in tableData"  :row-key="item.id"  :key="item.id" @click="showTag(item)">
          <div class="title">{{ item.name }}</div>
          <div class="msg">{{ item.msg || '无描述' }}</div>
          <div class="time">{{ item.operationTime }}</div>
          <i class="el-icon-delete canclick del-icon" v-if="!drop" @click.stop="deleteRow(item)"></i>
        </div>
      </div>
      <el-empty v-else style="margin-top: 100px;" description="暂无数据"></el-empty>
    </el-main>
    <el-dialog :title="`${form.id ? '编辑商品分类' : '新增商品分类'}`" :visible.sync="dialogVisible" :close-on-click-modal="false" center
      v-dialogDrag custom-class="mydialog" width="700px">
      <el-form ref="form" class="formlayout" :model="form" label-width="120px" label-position="left">
        <el-form-item class="dccform-line" label="商品分类名称" prop="name" required :rules="[{ required: true, message: '必填' }]">
          <el-input v-model="form.name" placeholder="请输入" maxlength="6"></el-input>
        </el-form-item>
        <el-form-item class="dccform-line" label="商品分类描述" prop="msg">
          <el-input v-model="form.msg"  :autosize="{ minRows: 2, maxRows: 8}" type="textarea" placeholder="请输入" maxlength="100"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="width: 120px;" @click="saveHandle">保存</el-button>
        <el-button style="width: 120px;" @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
import {
  SelectList,
  InsertHandle,
  UpdateHandle,
  DeleteHandle,
  SortHandle
} from '@/api/shop/category'
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      dialogVisible: false,
      search: {
        name: '',
        type: 'tag'
      },
      drop: false,
      sortable: null,
      form: {},
      tableData: []
    }
  },
  methods: {
    start () {
      this.drop = true
      this.rowDrop()
    },
    stop () {
      this.drop = false
      if (this.sortable) {
        this.sortable.destroy(); 
      }
      let params = this.tableData.map((d, i) => {
        return {
          id: d.id,
          orderNo: i
        }
      })
      SortHandle(params).then(res => {
        console.log('SortHandle', res)
        if (res.code === 20000) {
          this.loadData()
        }
      })
    },
     rowDrop () {
      const tbody = document.querySelector(
        ".draggable .tags"
      );
      console.log(tbody, 'tbody')
      const _this = this
      this.sortable = Sortable.create(tbody, {
        animation: 150,
        draggable: ".draggable .tag",
        onEnd ({ newIndex, oldIndex }) {
          console.log('=======', newIndex, oldIndex)
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          const aa = _this.tableData.splice(newIndex, 0, currRow)
          console.log(aa, _this.tableData)
        }
      })
    },
    showTag(row) {
      if (this.drop) {
        return
      }
      this.form = Object.assign({
        name: '',
        msg: ''
      }, row)
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    saveHandle() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 保存
          let params = Object.assign({}, this.form)
          let API = InsertHandle
          if (params.id) {
            API = UpdateHandle
          }
          delete params.createTime
          delete params.lastUpdateTime
          API(params).then((res) => {
            console.log('保存', res)
            if (res.code === 20000) {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.dialogVisible = false
              this.loadData()
            }
          })
        }
      })
    },
    deleteRow(row) {
      console.log(row)
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteHandle({ id: row.id }).then(res => {
          if (res.code === 20000) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.loadData()
          }
        })
      })
    },
    loadData() {
      SelectList(this.search)
        .then((res) => {
          console.log('success:', res)
          this.tableData = res.data
        })
        .catch((err) => {
          console.log('err:', err)
        })
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>
  
<style lang="scss" scoped>
.tags {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 60px 40px;

  .tag {
    background-color: rgba($color: $primary-color, $alpha: .2);
    border-top-right-radius: 10px;
    padding: 10px 20px;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: left;
    position: relative;
    border: 1px solid #f1f2f3;
    box-shadow: 0px 2px 10px #ccc;
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 5px;
    }

    .msg {
      color: #666;
    }
    .time {
      color: #787878;
      margin-top: 5px;
    }

    .del-icon {
      position: absolute;
      visibility: hidden;
      right: 5px;
      top: 5px;
      font-size: 16px;
    }

    &:hover {
      border: 1px solid $primary-color;
      box-shadow: 0px 2px 10px $primary-color;
      .del-icon {
        visibility: visible;
      }
    }

  }
}

.formlayout {
  padding: 20px 40px;
}
</style>
  